<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/searchGoods.css">
</head>

<body>
  <header>
    <div class="container">
      <div class="row">
        <div class="col-md-2">
          <a href="index.html"><span class="logo-text">DJI 大疆官网</span></a>
          <a href="javascript:void(0)" class="Logined none">
            <span>
              欢迎,<span class="userName"></span>
            </span>
          </a>
        </div>
        <div class="col-md-10">
          <div class="header-right">
            <span><a href="my_account.html" class="myAccount none">我的账号</a></span>
            <a href="login.html" class="unLogin"><span>登录</span></a>
            <span class="line"></span>
            <a href="shoppingCar.html"><span class="car">购物车</span></a>
            <span class="iconfont icon-home"></span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="wrap">
    <div class="top">
      <div class="container">
        <div class="row">
          <div class="col-md-2 logo-part">
            <span class="LoGo-img"> <img src="./img/index_img/timg.jpg" alt=""></span>
            <span class="shop-text">商城</span>
          </div>
          <div class="col-md-5 nav">
            <ul>
              <li>
                <span>商品分类</span>
                <span class="iconfont icon-paixujiantouxia
                "></span>
              </li>
              <li>
                <span>以旧换新</span>
              </li>
              <li>
                <span>购机指南</span>
              </li>
              <li>
                <span>DJI大疆商城APP</span>
              </li>
              <li>
                <span>优惠</span>
                <span class="iconfont icon-paixujiantouxia
                "></span>
              </li>
            </ul>
          </div>
          <div class="col-md-5">
            <div class="search">
              <a href="javascript:void(0)"><span class="iconfont icon-fangdajing" onclick="searchGoods()"></span></a>
              <input class="searchGoods" type="text" placeholder="搜索商品...">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main main-four">
      <div class="container">
        <div class="row">
          <div class="title">
            <div class="priceLow pointer">价格由高到低</div>
            <div class="priceHigh pointer">价格由低到高</div>
          </div>
        </div>
        <div class="row goodsList">

        </div>
      </div>
    </div>
  </div>
  <script src="./js/jquery-3.4.1.min.js"></script>
  <script src="./js/url.js"></script>
  <script>
    function init() {
      showIndexSearch()
      LoginOr()
    }
    init()

    //判断是否由用户登录
    function LoginOr() {
      if (localStorage.username) {
        $('.userName').text(localStorage.username)
        $('.unLogin').addClass('none')
        $('.Logined,.myAccount').removeClass('none')
      }
    }

    //首次显示商品  'category_id': null, 'order_by': null,
    function showIndexSearch() {
      let keyword = localStorage.goodsTitle
      console.log(keyword)
      $.ajax({
        type: "POST",
        url: productUrl,
        xhrFields: { withCredentials: true },
        dataType: 'json',
        data: { 'type': 'list', 'keyword': keyword, 'pageNum': 1, 'pageSize': 10 },
        success: function (res) {
          console.log(res)
          if (res.status === 0) {
            showGoods(res.data)
          }
        }
      })
    }

    //渲染商品
    function showGoods(res) {
      $('.main-four .goodsList').html('')
      for (let i = 0; i < res.length; i++) {
        let goodsName = res[i].name
        let goodsPrice = res[i].price
        let category_id = res[i].category_id
        let product_id = res[i].id
        let main_image = res[i].main_image
        // console.log(product_id)
        let goodsLink =
          `
                <div class="col-md-3">
                  <div class="goods-link" onclick="details(${product_id})" goods_id="${category_id}">
                     <div class="goods">
                      <div class="goods-pic-inside op-0">
                        <img src="./img/index_img/goodsin1.jpg" alt="">
                      </div>
                      <div class="goods-pic-outside">
                        <img src="${imgUrl + main_image}" alt="">
                      </div>
                      <div class="t_center goods-introduce">${goodsName}</div>
                      <div class="t_center goods-price">¥${goodsPrice}</div>
                    </div>
                  </div>
                </div>
            `
        $('.main-four .goodsList').append(goodsLink)
      }
    }

    //本界面搜索商品
    function searchGoods() {
      const goodsTitle = $('.searchGoods').val()
      $('.title .pointer').css({ 'background-color': '#fff', 'color': '#000' })
      if (goodsTitle) {
        localStorage.goodsTitle = goodsTitle
        showIndexSearch()
      }
    }

    //按价格排序
    function resort(text) {
      let keyword = localStorage.goodsTitle
      if (text === '价格由高到低') { //价格由高到低
        $.ajax({
          type: "POST",
          url: productUrl,
          xhrFields: { withCredentials: true },
          dataType: 'json',
          data: {
            'type': 'list', 'keyword': keyword, 'pageNum': 1, 'pageSize': 10, 'order_by': 'price_desc'
          },
          success: function (res) {
            console.log(res)
            let goodsArray = res.data
            // if (res.status === 0) {
            //   goodsArray = res.data.price.sort((a, b) => {
            //     return a - b;
            //   })
            //   console.log(goodsArray)
            //   // showGoods(goodsArray)
            // }
            if (res.status === 0) {
              showGoods(goodsArray)
            }
          }
        })
      } else { //价格由低到高
        $.ajax({
          type: "POST",
          url: productUrl,
          xhrFields: { withCredentials: true },
          dataType: 'json',
          data: { 'type': 'list', 'keyword': keyword, 'pageNum': 1, 'pageSize': 10, 'order_by': 'price_asc' },
          success: function (res) {
            console.log(res)
            // let goodsArray
            // if (res.status === 0) {
            //   goodsArray = res.data.price.sort((a, b) => {
            //     return b - a;
            //   })
            //   showGoods(goodsArray)
            // }
            let goodsArray = res.data
            if (res.status === 0) {
              showGoods(goodsArray)
            }
          }
        })
      }
    }

    // 进入商品详情
    function details(e) {
      localStorage.product_id = e
      window.location.href = 'goodsDetails.html'
    }
  </script>
  <script>
    $('.goods-link').mouseenter(function () {
      $(this).find('.goods-pic-inside').removeClass('op-0')
      $(this).find('.goods-pic-outside').addClass('op-0')
    })
    $('.goods-link').mouseleave(function () {
      $(this).find('.goods-pic-inside').addClass('op-0')
      $(this).find('.goods-pic-outside').removeClass('op-0')
    })

    $('.title .pointer').click(function () {
      $(this).css({ 'background-color': 'rgb(68, 168, 242)', 'color': '#fff' })
      $(this).siblings().css({ 'background-color': '#fff', 'color': '#000' })
      const text = $(this).text()
      resort(text)
    })
  </script>
</body>

</html>